<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1. 间谍装饰器
    function work(a, b) {
      return a + b;
    }

    // spy
    function spy(func) {
      function wrapper(...args) {
        wrapper.calls.push(args)
        return func.apply(this, args)
      }
      wrapper.calls = []
      return wrapper
    }

    work = spy(work)

    work(1, 2)
    work(4, 5)

    for (let args of work.calls) {
      console.log('calls: ' + args.join());
    }


    // 2. 延迟装饰器
    function f(x) {
      console.log(x)
    }
    function delay(func, time) {
      return function (...args) {
        const timeId = setTimeout(() => {
          func.apply(this, args)
          clearTimeout(timeId)
        }, time)
      }
    }

    let f1000 = delay(f, 1000)
    let f3000 = delay(f, 3000)
    f1000("test")
    f3000("test02")
  </script>


  <script>
    // 函数是第一等公民
    function func() {
      // 实例上的属性和方法
      this.age = 12;
    }
    // 函数上的实例和方法
    func.a = 1;
    func.sayHi = function() {
      console.log('hi')
    }
  </script>
</body>
</html>